<template>
  <!--登录交易-->
  <div class="foot_div">
  	<div class="foot_in">
  		<div class="foot_in_left">
  			<div class="footle">{{$t('m.Jiaoyispace')}}</div>
  			<div class="footle_d">
  				<div :class="disbg ? 'bg1' : ''" @click="xuanyl(1)">{{$t('m.Fushidian')}}</div>
  				<div :class="disbg ? '' : 'bg1'" @click="xuanyl(2)">{{$t('m.Fushilian')}}</div>
  			</div>
  		</div>
  		<div class="foot_in_right">
  			<div class="right_one">
  				<div class="right_title">{{$t('m.Jiaoyixiwei')}}</div>
  				<select style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;">
  					<option>{{$t('m.Fushictp')}}</option>
  				</select>
  			</div>
  			<div class="right_one">
  				<div class="right_title">{{$t('m.Customernumber')}}</div>
  				<input v-model="param.username" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" />
  			</div>
  			<div class="right_one">
  				<div class="right_title">{{$t('m.Jiaoyipsw')}}</div>
  				<input v-model="param.password" type="password" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" />
  			</div>
  			<div class="right_one">
  				<div class="right_title">{{$t('m.Safelogin')}}</div>
  				<select style="width:95px;height:22px;margin-left: 8px;border-radius: 3px;">
  					<option>{{$t('m.Verificationcode')}}</option>
  				</select>
  				<input v-model="aaa" @blur="checkNum" style="width:85px;height:22px;margin-left: 8px;border-radius: 3px;" type="text" />
  				<div class="codediv" @click="createCode">{{ bbb }}</div>
  			</div>
  			<div class="right_two">
  				<button class="bott_on" @click="btnclick&&unlock()">{{$t('m.Login')}}</button>
  				<button class="bott_on" @click="btnclick1&&tuichu()">{{$t('m.Tuichu')}}</button>
  			</div>
  		</div>
  	</div>
  	<div class="foor_bot">{{ ccc }}</div>
    <div class="looding" v-if="!btnclick">{{$t('m.LoginTips1')}}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
 export default {
   computed: mapState({
     userInfo: state => state.userInfo,/* 用户信息 */
   }),
   created: function() {
   	var that = this;
   	that.getuser();
   	that.createCode(); //初始化生成一个4位数的验证码
   	// that.getcicc();
   },
   data() {
     return {
       disbg: true,
       btnclick:true,/* 按钮功能 */
       btnclick1:true,/* 按钮功能 */
       param: {
       	username: '--' ,//账户
        password: '',
        group: 'pc'
       },
       aaa: '',
       bbb: '',
       ccc: this.$t('m.Ccctips'),
     };
   },
   mounted() {
    // this.createCode();
   },
   beforeDestroy() {

   },
   methods:{
     /* 判断网络*/
     xuanyl(val) {

     	if (val == 1) {
     		this.disbg = true;
     	} else if (val == 2) {
     		this.disbg = false;
     	}
     },
     //账户信息
     getuser() {
       // console.log(this.userInfo)
       this.param.username = this.userInfo.username;
       if(!this.userInfo.username||this.userInfo.username==undefined){
           let account = localStorage.getItem('siteName');
           this.param.username = account;
       }
     },
     /* 获取验证码*/
     createCode() {
     	var code = '';
     	var codeLength = 4; //验证码的长度
     	var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); //随机数
     	for (var i = 0; i < codeLength; i++) {
     		//循环操作
     		var index = Math.floor(Math.random() * 10); //取得随机数的索引（0~35）
     		code += random[index]; //根据索引取得随机数加到code上
     	}
     	this.bbb = code; //把code值赋给验证码
     },
     /* 判断验证码正确*/
     checkNum() {
		let that = this
     	if (this.aaa == this.bbb) {
     		return (this.ccc = that.$t('m.Vcodesuccess'));
     	} else {
     		this.ccc = that.$t('m.Vcodefail');
     		return this.createCode();
     	}
     },
     /* 解锁*/
     unlock() {
       this.btnclick=false;
     	var that = this;
     	if (that.password == '') {
        this.btnclick=true;
     		return (that.ccc = that.$t('m.PasswordTips'));
     	} else if (that.aaa == '') {
        this.btnclick=true;
     		return (that.ccc = that.$t('m.Vcodecheck'));
     	} else if (this.aaa !== this.bbb) {
        this.btnclick=true;
     		return (this.ccc = that.$t('m.Vcodefail'));
     	}
      this.$post('v1/site/login-name', this.param).then(res => {
        this.btnclick=true;
        // console.log(res);
        if (res.code == 200 && res.data.access_token) {
          localStorage.removeItem('_token');
          localStorage.removeItem('siteName');
          this.$svcInvoke.setConf("_token", res.data.access_token);
          localStorage.setItem('_token',res.data.access_token);
          localStorage.setItem('siteName',res.data.member.username);
          this.$store.commit('set',{userInfo:res.data.member});
          this.$store.commit('set',{bottomlist:'footlogin'});

          this.param.password = '';
          this.$notify.success(that.$t('m.Xianlusuccess'));
        } else {
          this.$notify.error(res.message||that.$t('m.Loginfail'));
        }
      });
      // console.log(this.$store.state)
     },
     /* 退出登录 */
     tuichu() {
	  let this_ = this
      this.btnclick1=false;
      this.$confirm(this_.$t('m.Exittips'), this_.$t('m.Tips'), {
        confirmButtonText: this_.$t('m.Checkbtn'),
        cancelButtonText: this_.$t('m.Cancelbtn'),
        type: 'warning'
      })
        .then(({ value }) => {
          this.btnclick1=true;
          this.$store.commit('set', { bottomlist: 'footnav' });
          this.$store.commit('set', { navtopheight: 100 });
          this.$store.commit('set', {isinclass: 2});
          localStorage.removeItem('_token');
          this.$svcInvoke.setConf("_token", "");
          this.$router.push({
            path: '/'
          });
        })
        .catch(() => {
          this.btnclick1=true;
          this.$notify({
            type: 'info',
            message: this_.$t('m.Cancelexit')
          });
        });
     },
   }
 };
</script>

<style scoped="scoped">
  /* 提示弹窗*/
  .looding{
    position: fixed;
    top: 300px;
    left: 50%;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    padding: 10px;
  }
  /* 颜色设置 */

  .isbg {
  	background-color: #ffffff;
  }
  .bg1 {
  	background-color: #3399ff;
  	color: #ffffff;
  }

  .foot_div {
  	width: 100%;
  	height: 100%;
  	background-color: #ffffff;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  }

  .foot_in {
  	width: 500px;
  	height: 190px;
  	margin: 20px auto;
  	display: flex;
  	justify-content: space-between;
  }
  .foor_bot{
  	width: 500px;
  	height: 20px;
  	margin: 0px auto;
  	text-align: left;
  	color:#0000FF;
  }

  .foot_in_left {
  	width: 40%;
  	height: 160px;
  	padding: 10px;
  	box-sizing: border-box;
  }

  .footle {
  	width: 100%;
  	text-align: left;
  }

  .footle_d {
  	margin-top: 6px;
  	width: 160px;
  	height: 95px;
  	border: #828790 solid 1px;
    cursor: default;
  }

  .foot_in_right{
  	width: 60%;
  	height: 180px;
  	box-sizing: border-box;
  	padding: 10px 0;
  }

  .foot_in_right_title{
    width:100%;
  }

  .right_one {
  	width: 100%;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	margin-top: 5px;
  }

  .right_title{
  	width: 90px;
  }

  .right_two {
  	width: 100%;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	margin-top: 15px;
  	box-sizing: border-box;
  	padding-left: 20px;
  }

  .bott_on {
  	margin-right: 10px;
  	width: 80px;
  	height: 22px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	border-radius: 5px;
  	border: #707070 solid 1px;
  }
  .codediv {
    cursor: pointer;
  	width: 85px;
  	height: 25px;
  	margin-left: 8px;
  	background-color: #c8c8c8;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	color: #00bfff;
  	font-weight: 600;
  }
</style>
